<div class="panel panel-primary">
  <div class="panel-heading">
    {{pageTitle}}
  </div>

  <div class="panel-body">
    <form class="form-horizontal" novalidate (ngSubmit)="login(loginForm)" #loginForm="ngForm"
      autocomplete="off">
      <fieldset>
        <div class="form-group" [ngClass]="{'has-error': (userNameVar.touched ||
                                          userNameVar.dirty) &&
                                          userNameVar.invalid }">
          <label class="col-md-2 control-label">User Name</label>

          <div class="col-md-8">
            <input class="form-control" type="text" placeholder="User Name (required)"
              required (ngModel)="userName" name="userName" #userNameVar="ngModel"
            >
            <span class="help-block" *ngIf="(userNameVar.touched ||
                                            userNameVar.dirty) &&
                                            userNameVar.invalid">
              <span *ngIf="userNameVar.errors.required">
                User name is required.
              </span>
            </span>
          </div>
        </div>

        <div class="form-group" [ngClass]="{'has-error': (passwordVar.touched ||
                                          passwordVar.dirty) &&
                                          passwordVar.invalid }">
          <label class="col-md-2 control-label">Password</label>

          <div class="col-md-8">
            <input class="form-control" type="password" placeholder="Password (required)"
              required (ngModel)="password" name="password" #passwordVar="ngModel"
            />
            <span class="help-block" *ngIf="(passwordVar.touched ||
                                            passwordVar.dirty) &&
                                            passwordVar.invalid">
              <span *ngIf="passwordVar.errors.required">
                Password is required.
              </span>
            </span>
          </div>
        </div>

        <div class="form-group">
          <div class="col-md-4 col-md-offset-2">
            <span>
              <button class="btn btn-primary" type="submit" style="width:80px;margin-right:10px"
                [disabled]="loginForm.invalid">
                Log In
              </button>
            </span>
            <span>
              <a class="btn btn-default" [routerLink]="['/welcome']">
                Cancel
              </a>
            </span>
          </div>
        </div>
      </fieldset>
    </form>
    <div class="has-error" *ngIf="errorMessage">{{errorMessage}}</div>
  </div>

</div>
